<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>async await</title>
</head>

<body>
    <div>async await</div>

    <script>

        // function login(userName) {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => { resolve('1001') }, 600)
        //     })
        // }
        // function getData(userId) {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             if (userId === '1001') {
        //                 resolve('Success')
        //             } else {
        //                 reject('Failed')
        //             }
        //         }, 600)
        //     })
        // }
        // 不使用async await
        /*****************************************************/
        // function doLogin(userName) {
        //     login(userName).then((res) => getData(res))
        //         .then(result => console.log(result))
        // }
        // doLogin('a')

        // async function doLogin2(userName) {
        //     const userId = await login(userName)
        //     console.log(userId)
        //     const result = await getData(userId)
        //     console.log(result)
        // }
        // doLogin2()
        /*****************************************************/
        // // async await 应用场景 获取异步函数的返回值
        // async function carCount(data1, data2) {
        //     const d1 = await count(data1)
        //     const d2 = await count(data2)
        //     return d1 + d2
        // }
        // function count(data) {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             resolve(data.length)
        //         }, 600)
        //     })
        // }
        // carCount('hello', 'hi').then(res => {
        //     console.log(res)
        // })
        // 上述例子中await 执行了两次 但两者之间并无关联 而且时间叠加 好使较长 这里我们改变方式 使用Promise.all 来实现
        /*****************************************************/
        // async function carCount2(data1,data2){
        //     const [d1,d2] = await Promise.all([count2(data1),count(data2)])
        //     return d1+d2
        // }
        // function count2(data) {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             resolve(data.length)
        //         }, 600)
        //     })
        // }
        // carCount2('hello World', 'hi').then(res => {
        //     console.log(res)
        // })
        // 与 上一种方法同时查看 明显输出结果的速度高于方法一
        /****************async/await的几种错误处理方式***************/

        // 第一种：捕捉整个async/await函数的错误
        // async function carCount3(data1,data2){
        //     const [d1,d2] = await Promise.all([count3(data1),count3(data2)])
        //     return d1+d2
        // }
        // function count3(data) {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //            if(data.length){
        //             resolve(data.length)
        //            }else{
        //                reject('Fail')
        //            }

        //         }, 600)
        //     })
        // }
        // carCount3(13, 'hi')
        // .then(res => {
        //     console.log(res)
        // })
        // .catch(error=>{
        //     console.log(error)
        // })
        /*****************************************************/
        // 第二种：捕捉单个的await表达式的错误
        // async function carCount4(data1, data2) {
        //     const d1 = await count4(data1)
        //     .catch(err=>{
        //         console.log(err+' d1')
        //         return 0
        //     })
        //     const d2 = await count4(data2)
        //     .catch(err=>{
        //         console.log(err+' d2')
        //     })
        //     return d1 + d2
        // }
        // function count4(data) {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             if(data.length){
        //             resolve(data.length)
        //            }else{
        //                reject('Fail',data)
        //            }
        //         }, 600)
        //     })
        // }
        // carCount4(17, 'hi').then(res => {
        //     console.log(res)
        // })
        // .catch(error=>{
        //     console.log(error)
        // })

        /*****************************************************/
        // 第三种：同时捕捉多个的await表达式的错误


        async function carCount5(data1, data2) {
            let d1, d2
            try {
                d1 = await count5(data1)
                d2 = await count5(data2)
            } catch (e) {
                console.log('d1', e)
            }
            return d1 + d2
        }
        carCount5(12, 33)
            .then(res => {
                console.log(res)
            })
        function count5(data) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    if (data.length) {
                        resolve(data.length)
                    } else {
                        reject('Fail'+data)
                    }
                }, 1000)
            })
        }

    </script>
</body>

</html>